<!--设备管理板块-->

<!--用户权限说明-->
<!--管理员：代码：1，可以做所有的操作-->
<!--只有查看功能：代码：2，只能查看-->
<!--可以录入加注点的维保信息，代码：3，可以录入加注点信息-->
<template>
  <div style="margin: 0;padding: 0">
    <el-container>
      <!--页面表头设计-->
      <el-header style="height: 7vh;display: flex; align-items: center; justify-content: flex-start;">
        <div style="flex: 0 0 auto; text-align: left">
          <el-link class="headMain" href="http://10.255.96.48:3404/">{{homepageName}}</el-link>
        </div>
        <div style="flex: 1; text-align: center;">
          <span>{{thisName}}</span>
        </div>
        <div style="flex:0; margin-left: auto;">

        </div>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <div style="height: 80%">
            <div style="margin-top: 10px">
              <el-card shadow="always">
                <div slot="header" class="clearfix" style="text-align: left">
                  <span>选择为：</span>
                </div>
                <div>
                  <span>数量为：</span>

                </div>
              </el-card>
            </div>
            <div style="margin-top: 10px">
              <el-button  type="info" plain style="width: 100%;" :style="background1" @click="selectType(1)">加注点管理</el-button>
            </div>
            <div style="margin-top: 10px">
              <el-button  type="info" plain style="width: 100%" :style="background2" @click="selectType(2)">螺栓紧固管理</el-button>
            </div>
            <div style="margin-top: 10px">
              <el-button  type="info" plain style="width: 100%" :style="background3" @click="selectType(3)">电器件管理</el-button>
            </div>
            <div style="margin-top: 10px">
              <el-button  type="info" plain style="width: 100%" :style="background4" @click="selectType(4)">设备精度管理</el-button>
            </div>

          </div>
        </el-aside>
        <el-container>
          <!--主题设计-->
          <el-main>
            <el-tabs v-model="activeName" @tab-click="handleClick" style="height: 100%">
              <el-tab-pane label="保养项目" name="first">
                <!--对加油点的管理内容-->
                <div v-if="selectTypeUse===1">
                  <div style="text-align: right;margin-top: 0">
                    <el-button @click="insertOilList(1)"
                               type="primary"
                               style="margin-left: 5px;margin-top: 0"
                                v-if="usePower===1">点击插入</el-button>
                  </div>
                  <div style="margin-top: 5px;width: 100%;height: 100%">
                    <el-table
                        :data="oilTable"
                        border
                        style="width: 100%"
                        height="62vh">
                      <el-table-column type="expand">
                        <template v-slot:default="props">
                          <div style="width: 100%;
                          margin-top: 10px;
                          border: 1px solid blue;
                          padding: 10px;
                          display: flex;
                          justify-content: space-between; /* 均布子元素 */
                          align-items: center;">
                            <div style="margin-left: 30px">
                              <span style="color: red;font-size: 16px">加油点名称:</span>
                              <span v-if="languageS==='chinese'&& props.row.oilPointName.split('|*|').length===3">{{props.row.oilPointName.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english'&& props.row.oilPointName.split('|*|').length===3">{{props.row.oilPointName.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian'&& props.row.oilPointName.split('|*|').length===3">{{props.row.oilPointName.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.oilPointName}}</span>
                            </div>
                            <div>
                              <span style="color: red;font-size: 16px">加油点位置：</span>
                              <span v-if="languageS==='chinese'&& props.row.oilPoint.split('|*|').length===3">{{props.row.oilPoint.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english'&& props.row.oilPoint.split('|*|').length===3">{{props.row.oilPoint.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian'&& props.row.oilPoint.split('|*|').length===3">{{props.row.oilPoint.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.oilPoint}}</span>
                            </div>
                            <div style="margin-right: 30px">
                              <span style="color: red;font-size: 16px">加油点位置图片：</span>
                              <el-link @click="upOilAnnex(props)">点击添加/修改</el-link>&nbsp;&nbsp;&nbsp;&nbsp;
                              <el-link @click="clickView(props,1)">点击查看</el-link>
                            </div>
                          </div>
                          <div style="width: 100%;
                          margin-top: 10px;border: 1px solid blue;
                          padding: 10px;
                          display: flex;
                          justify-content: space-between; /* 均布子元素 */
                          align-items: center;">
                            <div style="margin-left: 30px">
                              <span style="color: red;font-size: 16px">油脂名称：</span>
                              <span v-if="languageS==='chinese'&& props.row.oilName.split('|*|').length===3">{{props.row.oilName.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english'&& props.row.oilName.split('|*|').length===3">{{props.row.oilName.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian'&& props.row.oilName.split('|*|').length===3">{{props.row.oilName.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.oilName}}</span>
                            </div>
                            <div>
                              <span style="color: red;font-size: 16px">加油周期：</span>
                              <span v-if="languageS==='chinese'&& props.row.oilCycle.split('|*|').length===3">{{props.row.oilCycle.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english'&& props.row.oilCycle.split('|*|').length===3">{{props.row.oilCycle.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian'&& props.row.oilCycle.split('|*|').length===3">{{props.row.oilCycle.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.oilCycle}}</span>
                            </div>
                            <div>
                              <span style="color: red;font-size: 16px">加油量：</span>
                              <span v-if="languageS==='chinese'&& props.row.oilQuantity.split('|*|').length===3">{{props.row.oilQuantity.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english'&& props.row.oilQuantity.split('|*|').length===3">{{props.row.oilQuantity.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian'&& props.row.oilQuantity.split('|*|').length===3">{{props.row.oilQuantity.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.oilQuantity}}</span>
                            </div>
                            <div>
                              <span style="color: red;font-size: 16px">加油要领书：</span>&nbsp;&nbsp;
                              <span v-if="props.row.bookAnnex===''">无（点击添加）</span>
                              <span v-else>有</span>&nbsp;&nbsp;&nbsp;&nbsp;
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                          prop="workshop"
                          label="车间名称"
                          width="180"
                          v-slot:default="scope">
                        <span v-if="languageS==='chinese'">{{scope.row.workshop.split('/')[0]}}</span>
                        <span v-if="languageS==='english'">{{scope.row.workshop.split('/')[1]}}</span>
                        <span v-if="languageS==='russian'">{{scope.row.workshop.split('/')[2]}}</span>
                      </el-table-column>
                      <el-table-column
                          prop="lineName"
                          label="线体名称"
                          width="180">
                      </el-table-column>
                      <el-table-column
                          prop="equipmentName"
                          label="设备名称"
                          v-slot:default="scope">
                        <span v-if="languageS==='chinese'&& scope.row.equipmentName.split('|*|').length===3">{{scope.row.equipmentName.split('|*|')[0]}}</span>
                        <span v-else-if="languageS==='english'&& scope.row.equipmentName.split('|*|').length===3">{{scope.row.equipmentName.split('|*|')[1]}}</span>
                        <span v-else-if="languageS==='russian'&& scope.row.equipmentName.split('|*|').length===3">{{scope.row.equipmentName.split('|*|')[2]}}</span>
                        <span v-else>{{scope.row.equipmentName}}</span>
                      </el-table-column>
                      <el-table-column
                          prop="op"
                          label="工序号"
                          width="80">
                      </el-table-column>
                      <el-table-column
                        prop="oilPointName"
                        label="加油点名称"
                        v-slot:default="scope">
                        <span v-if="languageS==='chinese'&& scope.row.oilPointName.split('|*|').length===3">{{scope.row.oilPointName.split('|*|')[0]}}</span>
                        <span v-else-if="languageS==='english'&& scope.row.oilPointName.split('|*|').length===3">{{scope.row.oilPointName.split('|*|')[1]}}</span>
                        <span v-else-if="languageS==='russian'&& scope.row.oilPointName.split('|*|').length===3">{{scope.row.oilPointName.split('|*|')[2]}}</span>
                        <span v-else>{{scope.row.oilPointName}}</span>
                      </el-table-column>
                      <el-table-column
                        prop="oilCycle"
                        label="加油周期"
                        width="80">
                      </el-table-column>
                      <el-table-column
                        prop="oilPerson"
                        label="负责人">
                    </el-table-column>
                      <el-table-column
                          prop="lastDate"
                          label="上次加注"
                          v-slot:default="scope">
                        <div>{{scope.row.lastDate.split('/')[0]}}</div>
                        <div>{{scope.row.lastDate.split('/')[1]}}</div>
                      </el-table-column>
                      <el-table-column
                          prop="LastDate"
                          label="更新"
                          v-slot:default="scope"
                          width="50"
                          v-if="usePower===2 || usePower===1">
                        <div>
                          <el-link @click="editBooK(3,scope)"><i>更新</i></el-link>
                        </div>
                      </el-table-column>
                      <el-table-column
                          label="编辑"
                          v-slot:default="scope"
                          v-if="usePower===1">
                        <el-link type="primary" @click="upOilList(scope,2)">编辑</el-link>
                        &nbsp;&nbsp;&nbsp;
                        <el-link type="primary" @click="upOilList(scope,3)">删除</el-link>
                      </el-table-column>
                  </el-table>
                  </div>
                </div>

              </el-tab-pane>
              <el-tab-pane label="作业指导书" name="second">
                <div class="container"
                     v-if="selectTypeUse===1">
                  <div class="left-panel">
                    <el-table
                        :data="oilTable"
                        border
                        style="width: 100%"
                        height="62vh">
                      <el-table-column type="expand">
                        <template v-slot:default="props">
                          <div style="width: 100%;
                          margin-top: 10px;
                          border: 1px solid blue;
                          padding: 10px;
                          display: flex;
                          justify-content: space-between; /* 均布子元素 */
                          align-items: center;">
                            <div>
                              <span style="color: red;font-size: 16px">加油点位置：</span>
                              <span v-if="languageS==='chinese'&& props.row.oilPoint.split('|*|').length===3">{{props.row.oilPoint.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english'&& props.row.oilPoint.split('|*|').length===3">{{props.row.oilPoint.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian'&& props.row.oilPoint.split('|*|').length===3">{{props.row.oilPoint.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.oilPoint}}</span>
                            </div>
                          </div>
                          <div style="width: 100%;
                          margin-top: 10px;border: 1px solid blue;
                          padding: 10px;
                          display: flex;
                          justify-content: space-between; /* 均布子元素 */
                          align-items: center;">
                            <div style="margin-left: 30px">
                              <span style="color: red;font-size: 16px">线体名称：</span>
                              <span v-if="languageS==='chinese'&& props.row.lineName.split('|*|').length===3">{{props.row.lineName.split('|*|')[0]}}</span>
                              <span v-else-if="languageS==='english'&& props.row.lineName.split('|*|').length===3">{{props.row.lineName.split('|*|')[1]}}</span>
                              <span v-else-if="languageS==='russian'&& props.row.lineName.split('|*|').length===3">{{props.row.lineName.split('|*|')[2]}}</span>
                              <span v-else>{{props.row.lineName}}</span>
                            </div>
                          </div>
                          <div style="width: 100%;
                          margin-top: 10px;border: 1px solid blue;
                          padding: 10px;
                          display: flex;
                          justify-content: space-between; /* 均布子元素 */
                          align-items: center;">
                            <div style="margin-left: 30px">
                              <span style="color: red;font-size: 16px">工序号：</span>
                              <span>{{props.row.op}}</span>
                            </div>
                          </div>
                        </template>
                      </el-table-column>
                      <el-table-column
                          prop="oilPointName"
                          label="加油点名称"
                          v-slot:default="scope">
                        <div @click="oilPointRowBookClick(scope)" style="width: 100%">
                          <span v-if="languageS==='chinese'&& scope.row.oilPointName.split('|*|').length===3">{{scope.row.oilPointName.split('|*|')[0]}}</span>
                          <span v-else-if="languageS==='english'&& scope.row.oilPointName.split('|*|').length===3">{{scope.row.oilPointName.split('|*|')[1]}}</span>
                          <span v-else-if="languageS==='russian'&& scope.row.oilPointName.split('|*|').length===3">{{scope.row.oilPointName.split('|*|')[2]}}</span>
                          <span  v-else>{{scope.row.oilPointName}}</span>
                          <el-link
                              style="margin-left: 10px"
                              @click="upOilBookAnnex(scope)"
                              v-if="usePower===1"><i class="el-icon-picture-outline"></i></el-link>
                        </div>
                      </el-table-column>
                    </el-table>
                  </div>
                  <div class="right-panel">
                    <div style="width: 49%;margin-top: 5px">
                      <el-table
                          :data="oilTableBook"
                          border
                          style="width: 100%"
                          height="62vh">
                        <el-table-column
                            v-slot:default="scope"
                            label="步骤"
                            width="50">
                          {{scope.$index+1}}
                          <el-link
                          v-if="usePower===1"><i class="el-icon-download" @click="editBooK(2,scope)"></i></el-link>
                        </el-table-column>
                        <el-table-column
                            prop="work"
                            label="工作步骤"
                            v-slot:default="scope">
                          <span v-if="languageS==='chinese'&& scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[0]}}</span>
                          <span v-else-if="languageS==='english'&& scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[1]}}</span>
                          <span v-else-if="languageS==='russian'&& scope.row.work.split('|*|').length===3">{{scope.row.work.split('|*|')[2]}}</span>
                          <span  v-else>{{scope.row.work}}</span>
                          <el-link @click="editBooK(1,scope)"
                                   style="margin-right: 7px"
                                    v-if="usePower===1"><i class="el-icon-edit"></i></el-link>
                          <el-link style="margin-left: 10px" @click="editBooK(4,scope)"><i class="el-icon-delete"></i></el-link>
                        </el-table-column>
                      </el-table>
                    </div >
                    <div style="width: 49%">
                      <div class="block" style="margin-top: 5px">
                        <el-carousel height="62vh">
                          <el-carousel-item v-for="(item, index) in itemView" :key="index">
                            <el-image
                                style="width: 100%; height: 100%"
                                :src="item"
                                fit='contain'></el-image>
                            <el-link></el-link>
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>


              <el-tab-pane label="管理中台" name="third">管理中台</el-tab-pane>
            </el-tabs>
          </el-main>
          <el-footer>
            <el-button plain size="small" @click="chooseLanguage('chinese')">中  文</el-button>
            <el-button plain size="small" @click="chooseLanguage('russian')">Русский язык</el-button>
            <el-button plain size="small" @click="chooseLanguage('english')">English</el-button>
          </el-footer>
        </el-container>
      </el-container>
    </el-container>

    <!--弹窗放置区-->

    <!--加油点添加/修改的弹窗-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogAddOil"
        width="1000px"
        :before-close="handleClose">
      <el-form ref="oilDataTempForm" :rules="oilDataTemprules" :model="oilDataTemp" label-width="100px" :inline="true" >
        <div>
          <el-form-item label="车间名称：" prop="workshop">
            <el-select :inline="true" v-model="oilDataTemp.workshop" placeholder="请选择" style="width: 200px">
              <el-option
                  v-for="item in optionWorkshop"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="线体名称：" prop="lineName">
            <el-select v-model="oilDataTemp.lineName" placeholder="请选择" style="width: 200px">
              <el-option
                  v-for="item in optionLineName"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工序号：" prop="op">
            <el-select v-model="oilDataTemp.op" placeholder="请选择" style="width: 200px">
              <el-option
                  v-for="item in optionOp"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="设备名称：" prop="equipmentName">
            <el-input v-model="oilDataTemp.equipmentName" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="加油点名称：" prop="oilPoint">
            <el-input v-model="oilDataTemp.oilPointName" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="负责人：" prop="oilPerson">
            <el-input v-model="oilDataTemp.oilPerson" style="width: 200px"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="油脂名称：" prop="oilName">
            <el-input v-model="oilDataTemp.oilName" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="加油周期：" prop="oilCycle">
            <el-input-number v-model="oilDataTemp.oilCycle" style="width: 200px"></el-input-number>
          </el-form-item>
          <el-form-item label="加油量：" prop="oilQuantity">
            <el-input v-model="oilDataTemp.oilQuantity" style="width: 200px"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="加油点位置：" prop="oilPoint">
            <el-input v-model="oilDataTemp.oilPoint" style="width: 200px"></el-input>
          </el-form-item>
        </div>
        <el-form-item>
          <br>
          <el-button type="primary" @click="addOrUpOil('oilDataTempForm')">提交</el-button>
          <el-button @click="dialogAddOil = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!--点击编辑、修改、查看加油点位置照片-->
    <el-dialog
        :visible.sync="dialogOilP"
        :title="titleUse"
        >
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileOilPointAnnex(file, fileList)"
            :file-list="oilPictureList" >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                              <i class="el-icon-zoom-in"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                  <i class="el-icon-download"></i>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                              </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!--点击编辑、修改、查看作业指导书的照片-->
    <el-dialog
        :visible.sync="dialogOilBookAnnex"
        :title="titleUse"
    >
      <div style="margin-top: 10px;text-align: center; border: 1px solid #0269fa;padding: 10px">
        <el-upload
            action="http://10.255.96.48:3499/russiaEngine/"
            list-type="picture-card"
            :auto-upload="false"
            :on-change="(file, fileList) => saveFileOilBookAnnex(file, fileList)"
            :file-list="oilPictureList" >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{file}">
            <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt="">
            <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                   <i class="el-icon-zoom-in"></i>
                       </span>
                          <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                            <i class="el-icon-download"></i>
                              </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                  <i class="el-icon-delete"></i>
                                </span>
                          </span>
          </div>
        </el-upload>
      </div>
    </el-dialog>
    <!--点击加油点位置的图片后，出现的弹窗，显示点击的照片-->
    <el-dialog :visible.sync="dialogVP">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>

    <!--点击需要查看照片的地方用，显示出一个走马灯的效果-->
    <el-dialog :visible.sync="dialogView">
      <div class="block">
        <el-carousel trigger="click" :interval="4000" loop>
          <el-carousel-item v-for="(item, index) in itemView" :key="index">
            <el-image
            style="width: 600px; height: 450px"
            :src="item"
            fit="fill"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-dialog>

    <!--单击问题编辑区的弹窗，需要一个输入文本的地方-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleText"
        width="30%"
        :before-close="handleClose">
      <el-input placeholder="请输入内容"
                v-model="inputText"
                style="width: 100%"
                type="textarea"
                :rows="3"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleText = false">取 消</el-button>
    <el-button type="primary" @click="saveData">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，需要一个输入文本日期的地方-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleDate"
        width="30%"
        :before-close="handleClose">
      <el-date-picker
          v-model="inputDate"
          type="date"
          placeholder="选择日期">
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleDate = false">取 消</el-button>
    <el-button type="primary" @click="saveData">确 定</el-button>
  </span>
    </el-dialog>

    <!--抽屉放置区域-->
  </div>
</template>

<script>
import {filepath, OpAssemblyOil} from "@/configUse";
import _ from "lodash";
export default {
  name: "equipmentMaintain",
  components: {},
  data() {
    var checkNull = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空,请输入内容'));
      }else {
        callback();
      }
    }
    var checkNmb = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('不能为空'));
      }
      setTimeout(() => {
        if (!Number.isInteger(value)) {
          callback(new Error('请输入数字值'));
        } else {
          if (value > 1200) {
            callback(new Error('间隔不能超过1200天'));
          } else {
            callback();
          }
        }
      }, 1000);
    };
    return {
      //用户权限相关的变量
      useName:'',//用户名称
      useId:'',//用户编号
      usePower:'',//用户权限


      //页面的不同语言的变量使用区
      //主页名称
      homepageName:'',
      //本页名称
      thisName:'',


      //表单校验区
      oilDataTemprules: {
        workshop: [
          { validator: checkNull, trigger: 'blur' }
        ],
        lineName: [
          { validator: checkNull, trigger: 'blur' }
        ],
        op: [
          { validator: checkNull, trigger: 'blur' }
        ],
        equipmentName: [
          { validator: checkNull, trigger: 'blur' }
        ],
        oilPointName: [
          { validator: checkNull, trigger: 'blur' }
        ],
        oilPerson: [
          { validator: checkNull, trigger: 'blur' }
        ],
        oilName:[
          { validator: checkNull, trigger: 'blur' }
        ],
        oilCycle:[
          { validator: checkNmb, trigger: 'blur' }
        ],
        oilQuantity:[
          { validator: checkNull, trigger: 'blur' }
        ],
        oilPoint:[
          { validator: checkNull, trigger: 'blur' }
        ],
      },
      //控制tab分页起始显示什么的变量
      activeName: 'first',
      //控制按钮颜色，在点击后产生不同的背景色
      background1:'',
      background2:'',
      background3:'',
      background4:'',
      background5:'',
      //用户选择的类型（选择那种设备管理）
      selectTypeUse:'',


      //////加油点管理的相关变量//////
      //加油点的显示表单列表
      oilTable:[{
        //主键
        id:-1,
        //车间名称
        workshop:'',
        //线体名称
        lineName:'',
        //设备名称
        equipmentName:'',
        //工序号
        op:'',
        //加油点名称
        oilPointName:'',
        //加油点位置
        oilPoint:'',
        //加油点位置图片
        oilPointAnnex:'',
        itemView:'',
        //油脂名称
        oilName:'',
        //加油周期
        oilCycle:'',
        //加油量
        oilQuantity:'',
        //上一次加油时间
        LastDate:'',
        //加油要领书
        oilBook:'',
        //要领书附件
        bookAnnex:'',
        //负责人
        oilPerson:'',
        //加油记录
        oilRecord:'',
        //删除标记位
        deleteSign:1,
      }],
      //记录加油点管理的作业要领书的数据
      oilTableBook:[],
      //加油点添加的时候的表单变量
      oilDataTemp:{
        //主键
        id:-1,
        //车间名称
        workshop:'',
        //线体名称
        lineName:'',
        //设备名称
        equipmentName:'',
        //工序号
        op:'',
        //加油点名称
        oilPointName:'',
        //加油点位置
        oilPoint:'',
        //加油点位置图片
        oilPointAnnex:'',
        //油脂名称
        oilName:'',
        //加油周期
        oilCycle:'',
        //加油量
        oilQuantity:'',
        //上一次加油时间
        LastDate:'',
        //加油要领书
        oilBook:'',
        //要领书附件
        bookAnnex:'',
        //负责人
        oilPerson:'',
        //加油记录
        oilRecord:'',
        //删除标记位
        deleteSign:1,
      },

      //弹窗需要的变量
      //弹窗，修改加油点的关联10项的变量值
      dialogAddOil:false,
      //弹窗，上传加油点照片的文件
      dialogUpLoad:false,
      //点击需要编辑文本的地方的弹窗控制
      dialogVisibleText:false,
      //点击上传的照片，弹窗显示出图片的内容。
      dialogVP:false,
      //点击需要查看照片的地方，弹出的窗口。
      dialogView:false,
      //点击要修改、添加加油点的作业指导书中的图片
      dialogOilBookAnnex:false,
      //点击需要输入日期的地方，弹框
      dialogVisibleDate:false,
      //走马灯中的图片地址用到的变量数组,用在了两个地方
      itemView:[],
      //弹窗文本输入的变量
      inputText:'',
      //弹窗日期输入的变量
      inputDate:'',

      //点击查看、编辑、修改加油点位置照片的弹窗
      dialogOilP:false,
      //弹窗的提示信息
      titleUse: '提示',
      //记录信息的变量。用在加油点
      props:null,

      //接收用户的选择，判断是插入一行，还是编辑一行
      inteORadd:0,
      //接收用户是修改哪一行的索引
      upOilIndex:'',
      //选择车间的变量
      optionWorkshop: [{
        value: '装配车间/Assembly workshop/Сборочная линия',
        label: '装配车间/Assembly workshop/Сборочная линия'
      }, {value: '机加车间/Machining workshop/Машиностроительный цех', label: '机加车间/Machining workshop/Машиностроительный цех'},],

      optionLineName:[
        {
          value: '总成线',
          label: '总成线'
        },
        {
          value: '缸盖分装线',
          label: '缸盖分装线'
        }
      ],
      //记录用户选择的是编辑那个作业指导书，并且是什么类型
      //1：添加油液作业指导书，是编辑类型
      editBookType:'',
      optionOp:OpAssemblyOil,
      //记录用户选择的点击的是那个作业指导书的id，用做修改作业指导书的过程用,记录的是数据库中的ID
      oilBookParent:'',
      //记录用户选择的点击的是那个作业指导书的id，用做修改作业指导书的过程用,记录的是大表中的索引值
      oilBookParentIndex:'',
      //记录语言选择的类型
      languageS:'chinese',

      //上传照片用到的变量
      dialogImageUrl: '',
      disabled: false,
      //上传加油点位置的图片
      FileOilPointAnnexList:[],
      //上传图片的元素，回显图片用
      oilPictureList: [],
    }
  },
  watch: {},
  methods: {
    //查询用户信息的函数
    inquiry(){
      //输入用户编号，向后端查询信息
      const useId=localStorage.getItem('userName').replace(/"/g, '');
      this.$request.post('/useQueryPower',{
        queryFiledName:'equipmentMaintain',
        userId:useId,
      }).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }else {
              this.useName=result.data.name
              this.usePower=result.data.equipmentMaintain
              this.useId=useId
              console.log(this.useId,this.usePower,this.useName)
            }
      })
    },
    // 选择类型的变量
    selectType(doe){
      this.selectTypeUse=doe
      if (this.selectTypeUse === 1){
        this.background1={ backgroundColor: '#63a4ff' }
        this.background2=''
        this.background3=''
        this.background4=''
        this.background5=''
      }
      else if (this.selectTypeUse === 2){
        this.background1=''
        this.background2={ backgroundColor: '#63a4ff' }
        this.background3=''
        this.background4=''
        this.background5=''
      }
      else if (this.selectTypeUse === 3){
        this.background1=''
        this.background2=''
        this.background3={ backgroundColor: '#63a4ff' }
        this.background4=''
        this.background5=''
      }
      else if (this.selectTypeUse===4){
        this.background1=''
        this.background2=''
        this.background3=''
        this.background4={ backgroundColor: '#63a4ff' }
        this.background5=''
      }
    },
    //在tab控件上单击的函数
    handleClick(tab) {
      if (tab._props.name==='second'){
        //清空数据，让用户点击
        this.oilTableBook=[]
        this.itemView=[]
      }
      console.log(tab);
    },
    //增加一个空的加油点信息,1的时候代表为增加，2的时候代表为修改
    insertOilList(doe){
      this.inteORadd=doe
      if (doe===1){
        //初始化数据
        this.oilDataTemp={
          //车间名称
          workshop:'',
          //线体名称
          lineName:'',
          //设备名称
          equipmentName:'',
          //工序号
          op:'',
          //加油点名称
          oilPointName:'',
          //加油点位置
          oilPoint:'',
          //加油点位置图片
          oilPointAnnex:'',
          //油脂名称
          oilName:'',
          //加油周期
          oilCycle:'',
          //加油量
          oilQuantity:'',
          //上一次加油时间
          LastDate:'',
          //加油要领书
          oilBook:'无内容，请编制|-|',
          //要领书附件
          bookAnnex:'',
          //负责人
          oilPerson:'',
          //加油记录
          oilRecord:'',
          //删除标记位
          deleteSign:1,
        }
        this.titleUse='您正在插入一行新数据'
        this.dialogAddOil=true
      }
    },
    //修改列表
    upOilList(scope,doe){
      if (doe===2){
        this.inteORadd=doe
        this.oilDataTemp=scope.row
        this.upOilIndex=scope.$index
        this.titleUse='您正在编辑该行内容'
        this.dialogAddOil=true
      }
      else if (doe===3){
        this.inteORadd=doe
        this.oilDataTemp=scope.row
        this.upOilIndex=scope.$index
        this.titleUse='您正在删除该行内容'
        this.dialogAddOil=true
      }

    },
    //点击插入、修改表单中的“提交”按钮，执行的数据
    addOrUpOil(formName) {
        //这是修改一行数据
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.inteORadd===1){
              //向后端发送数据，进行插入。
              this.$request.post('/oilPointInsertOne',this.oilDataTemp).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  alert("保存成功")
                  //刷新修改后的数据，调用选择的数据，//重新查找数据
                  this.selectAllList()
                  this.dialogAddOil=false
                }
              })
            }
            else if (this.inteORadd===2){
              this.$request.post('/oilPointUpListOne',this.oilDataTemp).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  alert("保存成功")
                  //刷新修改后的数据，调用选择的数据，//重新查找数据
                  this.selectAllList()
                  this.dialogAddOil=false
                }
              })
            }
            else if (this.inteORadd===3){
              //将删除标记位修改为0
              this.oilDataTemp.deleteSign=0
              this.$request.post('/oilPointUpListOne',this.oilDataTemp).then(result=>{
                if (result.code === 401) {
                  this.$router.push('UserLogin')
                  alert("您未登录，请登录")
                } else {
                  alert("保存成功")
                  //刷新修改后的数据，调用选择的数据，//重新查找数据
                  this.selectAllList()
                  this.dialogAddOil=false
                }
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    //查询列表，查询出所有的表单
    selectAllList(){
      this.$request.post('/oilPointSelectAllList').then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          this.oilTable=result.data
        }
      })
    },
// 通用，弹窗关闭的时候
    handleClose(done) {
      this.$confirm('确认关闭？')
          // eslint-disable-next-line no-unused-vars
          .then(_ => {
            done();
          })
          // eslint-disable-next-line no-unused-vars
          .catch(_ => {});
    },
    //语言选择的函数
    chooseLanguage(language){
      this.languageS=language
      if (language==='chinese'){
        this.homepageName='俄罗斯动力质量管理系统'
        this.thisName='设备维保管理'
      }
      else if (language==='russian'){
        this.homepageName=' Система качества двигателей'
        this.thisName='Обслуживание оборудования'
      }
      else if (language==='english'){
        this.homepageName='Russian Engine Quality Management System'
        this.thisName='Equipment Maintenance Management'
      }
    },

    /*加油点位置的文件上传、下载、移除函数*/
    //点击编辑加油点照片的函数
    upOilAnnex(props){
      this.props=null
      this.props=props
      //组合照片的数据
      this.oilPictureList=[]
      const temp1=props.row.oilPointAnnex.split('|*|')
      for (let i = 0; i < temp1.length-1; i++) {
        let temp2={
          name:temp1[i],
          percentage:0,
          raw:File,
          size:0,
          status:null,
          uid:null,
          url: filepath+temp1[i]
        }
        this.oilPictureList.push(temp2)
      }
      this.dialogOilP=true
    },
    //保存并上传加油点位置图片
    saveFileOilPointAnnex(file, fileList){
      this.FileOilPointAnnexList=fileList
      this.oilPictureList.push(file)
      const formData = new FormData()
      //把文件数据放进去
      formData.append('file', file.raw)
      //把原来的图片字符串放进去，作为修改用
      formData.append('id',this.props.row.id)
      formData.append('oilPointAnnex',this.props.row.oilPointAnnex)
      //需要返回修改后的图片地址保存数据，并并且进行赋值
      this.$requestFile.post('/oilPointAnnex',formData).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          if (result.data===null){
            alert("程序出现异常，请联系管理员")
          }else {
            //修改列表中的数据
            this.oilTable[this.props.$index].oilPointAnnex=result.data
            //修改记录的props中的数据
            this.props.row.oilPointAnnex=result.data
            //组合照片的数据
            this.oilPictureList=[]
            const temp1=result.data.split('|*|')
            for (let i = 0; i < temp1.length-1; i++) {
              let temp2={
                name:temp1[i],
                percentage:0,
                raw:File,
                size:0,
                status:null,
                uid:null,
                url: filepath+temp1[i]
              }
              this.oilPictureList.push(temp2)
            }
          }
        }
      })
    },
    //点击图片下载按钮
    handleDownload(file) {
      //向后端发送请求，下载文件
      this.$request.get('/oilDownload?fileName=' + encodeURIComponent(file.name)).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }
        else {
          let base64Data = 'data:application/octet-stream;base64,' + result.data//
          // 创建一个Blob对象
          let blob = this.dataURItoBlob(base64Data);
          // 触发下载
          this.downloadBlob(blob, file.name);
        }
      }).catch(error => {
        // 处理请求错误
        console.error("请求出错", error);
      })
    },
    //照片移除的函数
    handleRemove(file) {
      const index = this.oilPictureList.findIndex(item => item.name === file.name);
      this.oilPictureList.splice(index,1)
      //发送请求，执行删除文件，发送的是这一行的id，记录图片地址的字符串，以及需要修改的字段，为了减少后端的写的代码，重新返回新的文件名的序列内容，并且更新。
      //组合数据，首先得到删除文件后的数据。
      let temp = this.props.row.oilPointAnnex.replace(file.name+'|*|','')
      this.$request.post('/oilPictureRemove',{
        id:this.props.id,
        fieldName:'oilPointAnnex',
        filedValue:temp,
        pictureName:file.name
      }).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }
        else {
          if (result.data==='删除文件时出错'){
            alert("删除文件出错，请联系管理员")
          }else {
            //更新数据
            //修改列表中的数据
            this.oilTable[this.props.$index].oilPointAnnex=result.data
            //修改记录的props中的数据
            this.props.row.oilPointAnnex=result.data
            //组合照片的数据
            this.oilPictureList=[]
            const temp1=result.data.split('|*|')
            for (let i = 0; i < temp1.length-1; i++) {
              let temp2 = {
                name: temp1[i],
                percentage: 0,
                raw: File,
                size: 0,
                status: null,
                uid: null,
                url: filepath + temp1[i]
              }
              this.oilPictureList.push(temp2)
            }
          }
        }
      })
    },
    //点击查看照片的函数
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVP = true;
    },
    /*加油点作业指导书的文件上传、下载、移除函数*/
    //点击编辑加油点作业指导书的函数
    upOilBookAnnex(scope){
      this.oilPointRowBookClick(scope)
      this.props=null
      this.props=scope
      //组合照片的数据
      this.oilPictureList=[]
      const temp1=scope.row.bookAnnex.split('|*|')
      for (let i = 0; i < temp1.length-1; i++) {
        let temp2={
          name:temp1[i],
          percentage:0,
          raw:File,
          size:0,
          status:null,
          uid:null,
          url: filepath+temp1[i]
        }
        this.oilPictureList.push(temp2)
      }
      this.dialogOilBookAnnex=true
    },
    //保存并上传加油点位置图片
    saveFileOilBookAnnex(file, fileList){
      this.FileOilPointAnnexList=fileList
      this.oilPictureList.push(file)
      const formData = new FormData()
      //把文件数据放进去
      formData.append('file', file.raw)
      //把原来的图片字符串放进去，作为修改用
      formData.append('id',this.props.row.id)
      formData.append('oilBookAnnex',this.props.row.bookAnnex)
      //需要返回修改后的图片地址保存数据，并并且进行赋值
      this.$requestFile.post('/oilBookAnnex',formData).then(result=>{
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        }else {
          if (result.data===null){
            alert("程序出现异常，请联系管理员")
          }else {
            //修改列表中的数据
            this.oilTable[this.props.$index].bookAnnex=result.data
            //修改记录的props中的数据
            this.props.row.bookAnnex=result.data
            //组合照片的数据
            this.oilPictureList=[]
            const temp1=result.data.split('|*|')
            for (let i = 0; i < temp1.length-1; i++) {
              let temp2={
                name:temp1[i],
                percentage:0,
                raw:File,
                size:0,
                status:null,
                uid:null,
                url: filepath+temp1[i]
              }
              this.oilPictureList.push(temp2)
            }
          }
        }
      })
    },
    //在加注点作业指导书上导航列表进行单击
    oilPointRowBookClick(scope){
      //给作业指导书步骤组合内容
      const oilBook = scope.row.oilBook.split('|-|')
      let bookTmep={}
      this.oilTableBook=[]
      for (let i = 0; i < oilBook.length-1; i++) {
        bookTmep={
          step:i+1,
          work:oilBook[i]
        }
        this.oilTableBook.push(bookTmep)
      }

      //给图片做组合，完成图片的数据显示
      this.itemView=[]
      const temp1=scope.row.bookAnnex.split('|*|')
      for (let i = 0; i < temp1.length-1; i++) {
        this.itemView.push(filepath+temp1[i])
      }
      this.oilBookParent=scope.row.id
      this.oilBookParentIndex=scope.$index

    },
    //点击加油点的作业指导书编辑或添加的时候的函数,显示弹窗；主表中，修改上一次加油时间的函数
    editBooK(doe,scope){
      //记录的用户选择的是那个作业指导书，是编辑，还是添加
      this.editBookType=doe
      if (this.editBookType===1){
        //是加注油管理中的作业指导书，是编辑行为
        this.titleUse="您正在编辑加注点的作业指导书"
        this.upOilIndex=scope.$index
        this.inputText=_.cloneDeep(this.oilTableBook[this.upOilIndex].work)
        this.dialogVisibleText=true
      }
      else if (this.editBookType===2){
        //是加油管理中的作业指导书，是向下增加一个步骤
        this.titleUse="您正在添加一个加注点作业步骤"
        this.upOilIndex=scope.$index
        this.inputText=''
        this.dialogVisibleText=true
      }
      else if (this.editBookType===3){
        //是修改最近的一次加油保养时间
        this.titleUse='您正在更新最维保日期'
        this.inputDate=''
        this.upOilIndex=scope.$index
        this.oilBookParent=scope.row.id
        this.inputDate=scope.row.LastDate
        this.dialogVisibleDate=true
      }
      else if (this.editBookType===4){
        //是作业要领书中的删除按钮
        this.titleUse="您正在删除本条加注点的作业指导书"
        this.upOilIndex=scope.$index
        this.inputText=_.cloneDeep(this.oilTableBook[this.upOilIndex].work)
        this.dialogVisibleText=true
      }
    },
    //需要保存数据的地方
    saveData(){
      if (this.editBookType===1){
        //是加注油管理中的作业指导书，是编辑行为
        //组合数据
        const textTemp=_.cloneDeep(this.oilTableBook)
        let  textSave=''
        //更换数据
        textTemp[this.upOilIndex].work=this.inputText
        //组合数据
        for (let i = 0; i < textTemp.length; i++) {
          textSave=textSave+textTemp[i].work+'|-|'
        }
        //向后端发送请求，进行修改内容
        this.$request.post('/editOilOneFieldText',{
          id:this.oilBookParent,
          fieldName:'oilBook',
          fieldValue:textSave+'/'+localStorage.getItem('userName'),
        })
            .then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }
          else {
            //把返回的刷新页面
            //1.刷新大表中的数据
            this.oilTable[this.oilBookParentIndex].oilBook=result.data
            //2.刷新作业指导书列表中的内容
            //给作业指导书步骤组合内容
            const oilBook = result.data.split('|-|')
            let bookTemp={}
            this.oilTableBook=[]
            for (let i = 0; i < oilBook.length-1; i++) {
              bookTemp={
                step:i+1,
                work:oilBook[i]
              }
              this.oilTableBook.push(bookTemp)
              this.dialogVisibleText=false
            }
          }
        })
      }
      else if (this.editBookType===2){
        //是加油管理中的作业指导书，是向下增加一个步骤
        if (this.upOilIndex===this.oilTableBook.length-1){
          //组合数据
          let textTemp=_.cloneDeep(this.oilTableBook)
          let  textSave=''
          //组合数据
          for (let i = 0; i < textTemp.length; i++) {
            textSave=textSave+textTemp[i].work+'|-|'
          }
          textSave=textSave+this.inputText+'|-|'
          //向后端发送请求，进行修改内容
          this.$request.post('/editOilOneFieldText',{
            id:this.oilBookParent,
            fieldName:'oilBook',
            fieldValue:textSave,
          }).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }
            else {
              //把返回的刷新页面
              //1.刷新大表中的数据
              this.oilTableBook[this.oilBookParentIndex].oilBook=result.data
              //2.刷新作业指导书列表中的内容
              //给作业指导书步骤组合内容
              const oilBook = result.data.split('|-|')
              let bookTemp={}
              this.oilTableBook=[]
              for (let i = 0; i < oilBook.length-1; i++) {
                bookTemp={
                  step:i+1,
                  work:oilBook[i]
                }
                this.oilTableBook.push(bookTemp)
                this.dialogVisibleText=false
              }
            }
          })
        }
        else if (this.upOilIndex<this.oilTableBook.length){
          //组合数据
          let textTemp=_.cloneDeep(this.oilTableBook)
          textTemp.splice(this.upOilIndex+1,0,{step:null,work:this.inputText})
          let  textSave=''
          //组合数据
          for (let i = 0; i < textTemp.length; i++) {
            textSave=textSave+textTemp[i].work+'|-|'
          }
          //向后端发送请求，进行修改内容
          this.$request.post('/editOilOneFieldText',{
            id:this.oilBookParent,
            fieldName:'oilBook',
            fieldValue:textSave,
          }).then(result=>{
            if (result.code === 401) {
              this.$router.push('UserLogin')
              alert("您未登录，请登录")
            }
            else {
              //把返回的刷新页面
              //1.刷新大表中的数据
              this.oilTableBook[this.oilBookParent].oilBook=result.data
              //2.刷新作业指导书列表中的内容
              //给作业指导书步骤组合内容
              const oilBook = result.data.split('|-|')
              let bookTemp={}
              this.oilTableBook=[]
              for (let i = 0; i < oilBook.length-1; i++) {
                bookTemp={
                  step:i+1,
                  work:oilBook[i]
                }
                this.oilTableBook.push(bookTemp)
                this.dialogVisibleText=false
              }
            }
          })
        }
        else {
          alert("系统出现异常，请联系管理员")
        }
      }
      else if (this.editBookType===3){
        //修改最新的加注时间
        //需要把数据处理，处理为yyyy-mm-dd格式的日期
        const date = new Date(this.inputDate);
        const year = date.getFullYear().toString().padStart(4, '0');
        const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
        const day = date.getDate().toString().padStart(2, '0');
        const val = `${year}-${month}-${day}`
        //向后端发送请求，进行修改内容
        this.$request.post('/editOilOneFieldText',{
          id:this.oilBookParent,
          fieldName:'LastDate',
          fieldValue:val+'/'+this.useName+'-'+this.useId,
        }).then(result=>{
          if (result.code === 401) {
            this.$router.push('UserLogin')
            alert("您未登录，请登录")
          }
          else {
            //保存数据，要把所有的记录都保存起来
            this.$request.post('/editOilOneFieldText',{
              id:this.oilBookParent,

              fieldName:'oilRecord',
              fieldValue:this.oilTable[this.upOilIndex].oilRecord+val+'/'+this.useName+'-'+this.useId+'|*|',
            }).then(result1=>{
              //更新数据
              this.oilTable[this.upOilIndex].lastDate=result.data
              this.oilTable[this.upOilIndex].oilRecord=result1.data
              this.dialogVisibleDate=false
              alert("修改成功")
            })
          }
        })
      }
      else if (this.editBookType===4){
        //是作业要领书中的删除按钮
        //组合数据
        const textTemp=_.cloneDeep(this.oilTableBook)
        let  textSave=''
        textTemp.splice(this.upOilIndex,1)
        //组合数据
        for (let i = 0; i < textTemp.length; i++) {
          textSave=textSave+textTemp[i].work+'|-|'
        }
        //向后端发送请求，进行修改内容
        this.$request.post('/editOilOneFieldText',{
          id:this.oilBookParent,
          fieldName:'oilBook',
          fieldValue:textSave+'/'+localStorage.getItem('userName'),
        })
            .then(result=>{
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              }
              else {
                //把返回的刷新页面
                //1.刷新大表中的数据
                this.oilTable[this.oilBookParentIndex].oilBook=result.data
                //2.刷新作业指导书列表中的内容
                //给作业指导书步骤组合内容
                const oilBook = result.data.split('|-|')
                let bookTemp={}
                this.oilTableBook=[]
                for (let i = 0; i < oilBook.length-1; i++) {
                  bookTemp={
                    step:i+1,
                    work:oilBook[i]
                  }
                  this.oilTableBook.push(bookTemp)
                  this.dialogVisibleText=false
                }
              }
            })

      }
    },

    clickView(props,doe){
      if (doe===1){
        const temp1=props.row.oilPointAnnex.split('|*|')
        for (let i = 0; i < temp1.length-1; i++) {
          this.itemView.push(filepath+temp1[i])
        }
        this.dialogView=true
      }
    },
    // 辅助函数：将Base64编码的字符串转换为Blob对象
    dataURItoBlob(dataURI) {
      // 分离出头部信息,得到数据部分
      let byteString;
      if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
      else
        byteString = unescape(dataURI.split(',')[1]);

      // 写入数组缓冲区
      let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
      let ia = new Uint8Array(byteString.length);
      for (let i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ia], {type:mimeString});
    },
    // 辅助函数：触发Blob对象的下载
    downloadBlob(blob, fileName) {
      let link = document.createElement('a');
      link.href = window.URL.createObjectURL(blob);
      link.download = fileName;
      link.click();
      window.URL.revokeObjectURL(link.href);
    },
  },

  mounted() {
    this.selectAllList()
    this.chooseLanguage('chinese')
    //调用用户权限和用户名称，用户编号
    this.inquiry()
  }
}
</script>

<style scoped>
/* 主体左侧的工作步骤栏用到的数据包围的div的样式*/

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  border-left-color: white;
  border-top: white;
}

.el-aside {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
  height: 89vh;
}

.el-main {
  color: #333;
  text-align: center;
  border-width: 3px; /* 设置边框宽度为3像素 */
  border-color: blue; /* 设置边框颜色为蓝色 */
  border-left-color: white;
  border-style: solid; /* 设置边框样式为实线 */
  padding: 10px; /* 添加内边距 */
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.headMain{
  color: #ffffff; /* 设置字体颜色为红色 */
  font-size: 18px;
}
.center-text {
  /* 使用 margin-left 和 margin-right auto 来实现居中效果 */
  margin-left: auto;
  margin-right: auto;
  /* 注意：如果 header 内只有这两个元素，你可能不需要 margin-right: auto */
}

/*自定义样式*/
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.container {
  display: flex; /* 使用Flexbox布局 */
  border: 1px solid transparent; /* 透明边框，仅用于示例，确保容器高度可见 */
}

.left-panel, .right-panel {
  border: 1px solid blue; /* 蓝色边框 */
  padding: 10px; /* 可选，为了内容更美观的间距 */
  height: 65vh;
}

.left-panel {
  width: 250px; /* 左边div固定宽度 */
  margin-right: 10px;
}

.right-panel {
  display: flex; /* 设置为flex容器 */
  justify-content: space-between; /* 子元素在主轴（默认为水平方向）上均匀分布 */
  align-items: center; /* 如果需要，可以在交叉轴（默认为垂直方向）上居中对齐子元素 */
  flex-grow: 1; /* 仍然保持这个属性，让.right-panel占据剩余空间 */
}

.right-panel > div {
  /* 如果需要，可以为子元素设置一些样式，比如宽度、高度、内边距等 */
  /* 例如，如果你不想子元素宽度自动调整，可以指定一个具体的宽度 */
  /* width: 50%; /* 但在使用space-between时，这通常不是必要的 */
  /* 其他样式，如边框、内边距等 */
}

</style>